<style>
    .classify_container{
        height: 100px;
        padding:15px;
        color: #666666;
    }
    .classify_container .col-md-1{
        height: 40px;
        color: #34847e;
    }
    .classify_container .btn-primary{
            color:#fff;
            background-color: #2cb5ac;
            font-size: 12px;
    }
	.classify_container .form-group div{
		padding-left: 0px;
	}
    .classify_container table td span:hover{
        cursor: pointer;
    }

</style>
<div class="classify_container">
    <div class="col-md-1">
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            新增
        </button>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"  style="border: none;">
            <h4 class="modal-title" id="exampleModalLabel" style="float: left;">新增栏目</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label"><span style="color: red;">*</span> 栏目名称</label>
                    <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">父栏目</label>
                    <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputPassword3">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">序号</label>
                    <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">栏目介绍</label>
                    <div class="col-sm-10">
                        <textarea name="introduce" id="inputPassword3" class="form-control" rows="2" style="resize: vertical;" ></textarea>
                    </div>
                </div>
                </form>
            </div>
            <div class="modal-footer"  style="border-top: none;">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="save">确定</button>
            </div>
        </div>
        </div>
    </div>
    <div class="row">
        <table class="table table-hover">
           <thead>
			   <th style="width:55px;">序号</th>
			   <th style="width: 100px;">名称</th>
               <th style="width: 85px;">排序号</th>
               <th>父栏目</th>
               <th>描述</th>
               <th>操作</th>
           </thead>
           <tbody>

           </tbody>
    </table>
    </div>
</div>

<script type="text/javascript">
    //声明全局变量baseUrl、currentPage、
    var baseUrl="http://39.96.74.136:7788/";

    //通过promise封装请求函数、
    function getData(type,url){
        var p=new Promise((resolve,reject)=>{
            //执行异步请求
            $.ajax({
                url:url,
                type:type,
                headers:{
                    "Authorization":sessionStorage.getItem("token")
                },
                success:function(data){
                    //成功后接受data对象返回 =>p
                    resolve(data);
                    console.log(data);
                }
            });
        });
        return p;
    }

    function getList(){
        //1.发送请求-请求所有分类信息
        getData("get",baseUrl+"category/findAll").then(function(data){
            //先清空所有tbody元素
		    $(".classify_container tbody").empty();
            //数据处理
            data.data.forEach((item)=>{
                $(".classify_container tbody").append(`<tr>
                            <td>`+item.id+`</td>    
                            <td>`+item.name+`</td>    
                            <td>`+item.no+`</td>        
                            <td></td> 
                            <td></td> 
                            <td>
                                <span class="delete">删除</span>    
                                <span class="edit">编辑</span>     
                            </td>   
                </tr>`)
            });
            //给编辑按钮绑定事件
            $(".edit").click(()=>{
                $('#exampleModal').modal('show');
                var name=$(event.target).parent().parent().children().eq(1).text();
                $('.modal-body input').eq(0).val(name);
            })

            //给删除按钮绑定事件
            $('.delete').click(()=>{
                //获取id
                var id=$(event.target).parent().parent().children().eq(0).text();

                var i=confirm('确认删除？')        
                if(i==true){
                getData("get",baseUrl+'category/deleteById?id='+id).then(function(data){
                    if(data.status==200){
                        alert(data.message);
                        //刷新页面
                        getList();
                        }
                    })
                }
            })
        });
    }
    getList();

    $("#save").click(()=>{
        var name=$('.modal-body input').eq(0).val();
        var no=$('.modal-body input').eq(2).val();
        getData("post",baseUrl+"category/saveOrUpdate?name="+name+'&no='+no).then(function(data){
            if(data.status==200){
                //刷新页面
                $('#exampleModal').modal('hide');
                getList();
            }
        });
    })


</script>
